<template>
	<view class="planet-container">
		<view class="header">
			<text class="title">星球</text>
			<text class="subtitle">探索道家文化的各个领域</text>
		</view>
		
		<view class="planet-list">
			<view 
				class="planet-item" 
				v-for="(planet, index) in planetList" 
				:key="index"
				@click="enterPlanet(planet)"
			>
				<view class="planet-avatar">
					<text class="planet-icon">{{ planet.icon }}</text>
				</view>
				<view class="planet-info">
					<text class="planet-name">{{ planet.name }}</text>
					<text class="planet-desc">{{ planet.description }}</text>
					<view class="planet-stats">
						<text class="stat-item">{{ planet.memberCount }}位道友</text>
						<text class="stat-item">{{ planet.topicCount }}个话题</text>
					</view>
				</view>
				<view class="planet-arrow">></view>
			</view>
		</view>
		
		<view class="create-planet" @click="createNewPlanet">
			<text class="create-icon">+</text>
			<text class="create-text">创建新星球</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const planetList = ref([
	{
		id: 1,
		name: '道德经研习',
		description: '深入探讨老子道德经的智慧',
		icon: '📖',
		memberCount: 1280,
		topicCount: 256
	},
	{
		id: 2,
		name: '庄子逍遥游',
		description: '跟随庄子探索逍遥自在的人生',
		icon: '🦋',
		memberCount: 856,
		topicCount: 189
	},
	{
		id: 3,
		name: '道家养生',
		description: '学习道家养生之道与健康智慧',
		icon: '🌿',
		memberCount: 2048,
		topicCount: 432
	},
	{
		id: 4,
		name: '内丹修炼',
		description: '探讨道家内丹修炼的奥秘',
		icon: '⚡',
		memberCount: 512,
		topicCount: 98
	},
	{
		id: 5,
		name: '道家哲学',
		description: '研究道家哲学思想体系',
		icon: '🧠',
		memberCount: 1024,
		topicCount: 167
	}
])

// 方法
const enterPlanet = (planet) => {
	uni.navigateTo({
		url: `/pages/planet/detail?id=${planet.id}&name=${planet.name}`,
		fail: () => {
			uni.showToast({
				title: '星球详情页开发中',
				icon: 'none'
			})
		}
	})
}

const createNewPlanet = () => {
	uni.navigateTo({
		url: '/pages/planet/create',
		fail: () => {
			uni.showToast({
				title: '创建星球功能开发中',
				icon: 'none'
			})
		}
	})
}

// 生命周期
onMounted(() => {
	console.log('星球页面已挂载')
})
</script>

<style scoped>
.planet-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 20rpx;
}

.header {
	padding: 40rpx 0;
	text-align: center;
}

.title {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 10rpx;
}

.subtitle {
	display: block;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
}

.planet-list {
	margin-bottom: 40rpx;
}

.planet-item {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
}

.planet-item:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 1);
}

.planet-avatar {
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
}

.planet-icon {
	font-size: 40rpx;
}

.planet-info {
	flex: 1;
}

.planet-name {
	display: block;
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10rpx;
}

.planet-desc {
	display: block;
	font-size: 26rpx;
	color: #666666;
	margin-bottom: 15rpx;
}

.planet-stats {
	display: flex;
	gap: 20rpx;
}

.stat-item {
	font-size: 22rpx;
	color: #999999;
	background: rgba(102, 126, 234, 0.1);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
}

.planet-arrow {
	font-size: 32rpx;
	color: #cccccc;
	font-weight: bold;
}

.create-planet {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 40rpx;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20rpx;
	transition: all 0.3s ease;
}

.create-planet:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 1);
}

.create-icon {
	font-size: 40rpx;
	color: #667eea;
	font-weight: bold;
}

.create-text {
	font-size: 32rpx;
	color: #667eea;
	font-weight: bold;
}
</style>
